<!-- HTML header for doxygen 1.8.6-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<meta name="generator" content="Doxygen 1.8.13"/>
<title>OpenCV: Using OpenCV.js In Node.js</title>
<link href="../../opencv.ico" rel="shortcut icon" type="image/x-icon" />
<link href="../../tabs.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../../jquery.js"></script>
<script type="text/javascript" src="../../dynsections.js"></script>
<script type="text/javascript" src="../../tutorial-utils.js"></script>
<link href="../../search/search.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../../search/searchdata.js"></script>
<script type="text/javascript" src="../../search/search.js"></script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    extensions: ["tex2jax.js", "TeX/AMSmath.js", "TeX/AMSsymbols.js"],
    jax: ["input/TeX","output/HTML-CSS"],
});
//<![CDATA[
MathJax.Hub.Config(
{
  TeX: {
      Macros: {
          matTT: [ "\\[ \\left|\\begin{array}{ccc} #1 & #2 & #3\\\\ #4 & #5 & #6\\\\ #7 & #8 & #9 \\end{array}\\right| \\]", 9],
          fork: ["\\left\\{ \\begin{array}{l l} #1 & \\mbox{#2}\\\\ #3 & \\mbox{#4}\\\\ \\end{array} \\right.", 4],
          forkthree: ["\\left\\{ \\begin{array}{l l} #1 & \\mbox{#2}\\\\ #3 & \\mbox{#4}\\\\ #5 & \\mbox{#6}\\\\ \\end{array} \\right.", 6],
          forkfour: ["\\left\\{ \\begin{array}{l l} #1 & \\mbox{#2}\\\\ #3 & \\mbox{#4}\\\\ #5 & \\mbox{#6}\\\\ #7 & \\mbox{#8}\\\\ \\end{array} \\right.", 8],
          vecthree: ["\\begin{bmatrix} #1\\\\ #2\\\\ #3 \\end{bmatrix}", 3],
          vecthreethree: ["\\begin{bmatrix} #1 & #2 & #3\\\\ #4 & #5 & #6\\\\ #7 & #8 & #9 \\end{bmatrix}", 9],
          cameramatrix: ["#1 = \\begin{bmatrix} f_x & 0 & c_x\\\\ 0 & f_y & c_y\\\\ 0 & 0 & 1 \\end{bmatrix}", 1],
          distcoeffs: ["(k_1, k_2, p_1, p_2[, k_3[, k_4, k_5, k_6 [, s_1, s_2, s_3, s_4[, \\tau_x, \\tau_y]]]]) \\text{ of 4, 5, 8, 12 or 14 elements}"],
          distcoeffsfisheye: ["(k_1, k_2, k_3, k_4)"],
          hdotsfor: ["\\dots", 1],
          mathbbm: ["\\mathbb{#1}", 1],
          bordermatrix: ["\\matrix{#1}", 1]
      }
  }
}
);
//]]>
</script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js"></script>
<link href="../../doxygen.css" rel="stylesheet" type="text/css" />
<link href="../../stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
<div id="titlearea">
<!--#include virtual="/google-search.html"-->
<table cellspacing="0" cellpadding="0">
 <tbody>
 <tr style="height: 56px;">
  <td id="projectlogo"><img alt="Logo" src="../../opencv-logo-small.png"/></td>
  <td style="padding-left: 0.5em;">
   <div id="projectname">OpenCV
   &#160;<span id="projectnumber">4.5.2</span>
   </div>
   <div id="projectbrief">Open Source Computer Vision</div>
  </td>
 </tr>
 </tbody>
</table>
</div>
<!-- end header part -->
<!-- Generated by Doxygen 1.8.13 -->
<script type="text/javascript">
var searchBox = new SearchBox("searchBox", "../../search",false,'Search');
</script>
<script type="text/javascript" src="../../menudata.js"></script>
<script type="text/javascript" src="../../menu.js"></script>
<script type="text/javascript">
$(function() {
  initMenu('../../',true,false,'search.php','Search');
  $(document).ready(function() { init_search(); });
});
</script>
<div id="main-nav"></div>
<!-- window showing the filter options -->
<div id="MSearchSelectWindow"
     onmouseover="return searchBox.OnSearchSelectShow()"
     onmouseout="return searchBox.OnSearchSelectHide()"
     onkeydown="return searchBox.OnSearchSelectKey(event)">
</div>

<!-- iframe showing the search results (closed by default) -->
<div id="MSearchResultsWindow">
<iframe src="javascript:void(0)" frameborder="0" 
        name="MSearchResults" id="MSearchResults">
</iframe>
</div>

<div id="nav-path" class="navpath">
  <ul>
<li class="navelem"><a class="el" href="../../d5/d10/tutorial_js_root.html">OpenCV.js Tutorials</a></li><li class="navelem"><a class="el" href="../../df/df7/tutorial_js_table_of_contents_setup.html">Introduction to OpenCV.js</a></li>  </ul>
</div>
</div><!-- top -->
<div class="header">
  <div class="headertitle">
<div class="title">Using OpenCV.js In Node.js </div>  </div>
</div><!--header-->
<div class="contents">
<div class="textblock"><h2>Goals </h2>
<p>In this tutorial, you will learn:</p>
<ul>
<li>Use OpenCV.js in a <a href="https://nodejs.org">Node.js</a> application.</li>
<li>Load images with <a href="https://www.npmjs.com/package/jimp">jimp</a> in order to use them with OpenCV.js.</li>
<li>Using <a href="https://www.npmjs.com/package/canvas">jsdom</a> and <a href="https://www.npmjs.com/package/canvas">node-canvas</a> to support <code><a class="el" href="../../d4/da8/group__imgcodecs.html#ga288b8b3da0892bd651fce07b3bbd3a56" title="Loads an image from a file. ">cv.imread()</a></code>, <code><a class="el" href="../../d7/dfc/group__highgui.html#ga453d42fe4cb60e5723281a89973ee563" title="Displays an image in the specified window. ">cv.imshow()</a></code></li>
<li>The basics of <a href="https://emscripten.org/">emscripten</a> APIs, like <a href="https://emscripten.org/docs/api_reference/module.html">Module</a> and <a href="https://emscripten.org/docs/api_reference/Filesystem-API.html">File System</a> on which OpenCV.js is based.</li>
<li>Learn Node.js basics. Although this tutorial assumes the user knows JavaScript, experience with Node.js is not required.</li>
</ul>
<dl class="section note"><dt>Note</dt><dd>Besides giving instructions to run OpenCV.js in Node.js, another objective of this tutorial is to introduce users to the basics of <a href="https://emscripten.org/">emscripten</a> APIs, like <a href="https://emscripten.org/docs/api_reference/module.html">Module</a> and <a href="https://emscripten.org/docs/api_reference/Filesystem-API.html">File System</a> and also Node.js.</dd></dl>
<h2>Minimal example </h2>
<p>Create a file <code>example1.js</code> with the following content:</p>
<div class="fragment"><div class="line">// Define a global variable &#39;Module&#39; with a method &#39;onRuntimeInitialized&#39;:</div><div class="line">Module = {</div><div class="line">  onRuntimeInitialized() {</div><div class="line">    // this is our application:</div><div class="line">    console.log(cv.getBuildInformation())</div><div class="line">  }</div><div class="line">}</div><div class="line">// Load &#39;opencv.js&#39; assigning the value to the global variable &#39;cv&#39;</div><div class="line">cv = require(&#39;./opencv.js&#39;)</div></div><!-- fragment --><h3>Execute it</h3>
<ul>
<li>Save the file as <code>example1.js</code>.</li>
<li>Make sure the file <code>opencv.js</code> is in the same folder.</li>
<li>Make sure <a href="https://nodejs.org">Node.js</a> is installed on your system.</li>
</ul>
<p>The following command should print OpenCV build information:</p>
<div class="fragment"><div class="line">node example1.js</div></div><!-- fragment --><h3>What just happened?</h3>
<ul>
<li><b>In the first statement</b>:, by defining a global variable named 'Module', emscripten will call <code>Module.onRuntimeInitialized()</code> when the library is ready to use. Our program is in that method and uses the global variable <code>cv</code> just like in the browser.</li>
<li>The statement **"cv = require('./opencv.js')"** requires the file <code>opencv.js</code> and assign the return value to the global variable <code>cv</code>. <code>require()</code> which is a Node.js API, is used to load modules and files. In this case we load the file <code>opencv.js</code> form the current folder, and, as said previously emscripten will call <code>Module.onRuntimeInitialized()</code> when its ready.</li>
<li>See <a href="https://emscripten.org/docs/api_reference/module.html">emscripten Module API</a> for more details.</li>
</ul>
<h2>Working with images </h2>
<p>OpenCV.js doesn't support image formats so we can't load png or jpeg images directly. In the browser it uses the HTML DOM (like HTMLCanvasElement and HTMLImageElement to decode and decode images). In node.js we will need to use a library for this.</p>
<p>In this example we use <a href="https://www.npmjs.com/package/jimp">jimp</a>, which supports common image formats and is pretty easy to use.</p>
<h3>Example setup</h3>
<p>Execute the following commands to create a new node.js package and install <a href="https://www.npmjs.com/package/jimp">jimp</a> dependency:</p>
<div class="fragment"><div class="line">mkdir project1</div><div class="line">cd project1</div><div class="line">npm init -y</div><div class="line">npm install jimp</div></div><!-- fragment --><h3>The example</h3>
<div class="fragment"><div class="line">const Jimp = require(&#39;jimp&#39;);</div><div class="line"></div><div class="line">async function onRuntimeInitialized(){</div><div class="line"></div><div class="line">  // load local image file with jimp. It supports jpg, png, bmp, tiff and gif:</div><div class="line">  var jimpSrc = await Jimp.read(&#39;./lena.jpg&#39;);</div><div class="line"></div><div class="line">  // `jimpImage.bitmap` property has the decoded ImageData that we can use to create a cv:Mat</div><div class="line">  var src = cv.matFromImageData(jimpSrc.bitmap);</div><div class="line"></div><div class="line">  // following lines is copy&amp;paste of opencv.js dilate tutorial:</div><div class="line">  let dst = new cv.Mat();</div><div class="line">  let M = cv.Mat.ones(5, 5, cv.CV_8U);</div><div class="line">  let anchor = new cv.Point(-1, -1);</div><div class="line">  cv.dilate(src, dst, M, anchor, 1, cv.BORDER_CONSTANT, cv.morphologyDefaultBorderValue());</div><div class="line"></div><div class="line">  // Now that we are finish, we want to write `dst` to file `output.png`. For this we create a `Jimp`</div><div class="line">  // image which accepts the image data as a [`Buffer`](https://nodejs.org/docs/latest-v10.x/api/buffer.html).</div><div class="line">  // `write(&#39;output.png&#39;)` will write it to disk and Jimp infers the output format from given file name:</div><div class="line">  new Jimp({</div><div class="line">    width: dst.cols,</div><div class="line">    height: dst.rows,</div><div class="line">    data: Buffer.from(dst.data)</div><div class="line">  })</div><div class="line">  .write(&#39;output.png&#39;);</div><div class="line"></div><div class="line">  src.delete();</div><div class="line">  dst.delete();</div><div class="line">}</div><div class="line"></div><div class="line">// Finally, load the open.js as before. The function `onRuntimeInitialized` contains our program.</div><div class="line">Module = {</div><div class="line">  onRuntimeInitialized</div><div class="line">};</div><div class="line">cv = require(&#39;./opencv.js&#39;);</div></div><!-- fragment --><h3>Execute it</h3>
<ul>
<li>Save the file as <code>exampleNodeJimp.js</code>.</li>
<li>Make sure a sample image <code>lena.jpg</code> exists in the current directory.</li>
</ul>
<p>The following command should generate the file <code>output.png</code>:</p>
<div class="fragment"><div class="line">node exampleNodeJimp.js</div></div><!-- fragment --><h2>Emulating HTML DOM and canvas </h2>
<p>As you might already seen, the rest of the examples use functions like <code><a class="el" href="../../d4/da8/group__imgcodecs.html#ga288b8b3da0892bd651fce07b3bbd3a56" title="Loads an image from a file. ">cv.imread()</a></code>, <code><a class="el" href="../../d7/dfc/group__highgui.html#ga453d42fe4cb60e5723281a89973ee563" title="Displays an image in the specified window. ">cv.imshow()</a></code> to read and write images. Unfortunately as mentioned they won't work on Node.js since there is no HTML DOM.</p>
<p>In this section, you will learn how to use <a href="https://www.npmjs.com/package/canvas">jsdom</a> and <a href="https://www.npmjs.com/package/canvas">node-canvas</a> to emulate the HTML DOM on Node.js so those functions work.</p>
<h3>Example setup</h3>
<p>As before, we create a Node.js project and install the dependencies we need:</p>
<div class="fragment"><div class="line">mkdir project2</div><div class="line">cd project2</div><div class="line">npm init -y</div><div class="line">npm install canvas jsdom</div></div><!-- fragment --><h3>The example</h3>
<div class="fragment"><div class="line">const { Canvas, createCanvas, Image, ImageData, loadImage } = require(&#39;canvas&#39;);</div><div class="line">const { JSDOM } = require(&#39;jsdom&#39;);</div><div class="line">const { writeFileSync, existsSync, mkdirSync } = require(&quot;fs&quot;);</div><div class="line"></div><div class="line">// This is our program. This time we use JavaScript async / await and promises to handle asynchronicity.</div><div class="line">(async () =&gt; {</div><div class="line"></div><div class="line">  // before loading opencv.js we emulate a minimal HTML DOM. See the function declaration below.</div><div class="line">  installDOM();</div><div class="line"></div><div class="line">  await loadOpenCV();</div><div class="line"></div><div class="line">  // using node-canvas, we an image file to an object compatible with HTML DOM Image and therefore with cv.imread()</div><div class="line">  const image = await loadImage(&#39;./lena.jpg&#39;);</div><div class="line"></div><div class="line">  const src = cv.imread(image);</div><div class="line">  const dst = new cv.Mat();</div><div class="line">  const M = cv.Mat.ones(5, 5, cv.CV_8U);</div><div class="line">  const anchor = new cv.Point(-1, -1);</div><div class="line">  cv.dilate(src, dst, M, anchor, 1, cv.BORDER_CONSTANT, cv.morphologyDefaultBorderValue());</div><div class="line"></div><div class="line">  // we create an object compatible HTMLCanvasElement</div><div class="line">  const canvas = createCanvas(300, 300);</div><div class="line">  cv.imshow(canvas, dst);</div><div class="line">  writeFileSync(&#39;output.jpg&#39;, canvas.toBuffer(&#39;image/jpeg&#39;));</div><div class="line">  src.delete();</div><div class="line">  dst.delete();</div><div class="line">})();</div><div class="line"></div><div class="line">// Load opencv.js just like before but using Promise instead of callbacks:</div><div class="line">function loadOpenCV() {</div><div class="line">  return new Promise(resolve =&gt; {</div><div class="line">    global.Module = {</div><div class="line">      onRuntimeInitialized: resolve</div><div class="line">    };</div><div class="line">    global.cv = require(&#39;./opencv.js&#39;);</div><div class="line">  });</div><div class="line">}</div><div class="line"></div><div class="line">// Using jsdom and node-canvas we define some global variables to emulate HTML DOM.</div><div class="line">// Although a complete emulation can be archived, here we only define those globals used</div><div class="line">// by cv.imread() and cv.imshow().</div><div class="line">function installDOM() {</div><div class="line">  const dom = new JSDOM();</div><div class="line">  global.document = dom.window.document;</div><div class="line"></div><div class="line">  // The rest enables DOM image and canvas and is provided by node-canvas</div><div class="line">  global.Image = Image;</div><div class="line">  global.HTMLCanvasElement = Canvas;</div><div class="line">  global.ImageData = ImageData;</div><div class="line">  global.HTMLImageElement = Image;</div><div class="line">}</div></div><!-- fragment --><h3>Execute it</h3>
<ul>
<li>Save the file as <code>exampleNodeCanvas.js</code>.</li>
<li>Make sure a sample image <code>lena.jpg</code> exists in the current directory.</li>
</ul>
<p>The following command should generate the file <code>output.jpg</code>:</p>
<div class="fragment"><div class="line">node exampleNodeCanvas.js</div></div><!-- fragment --><h2>Dealing with files </h2>
<p>In this tutorial you will learn how to configure emscripten so it uses the local filesystem for file operations instead of using memory. Also it tries to describe how <a href="https://emscripten.org/docs/api_reference/Filesystem-API.html">files are supported by emscripten applications</a></p>
<p>Accessing the emscripten filesystem is often needed in OpenCV applications for example to load machine learning models such as the ones used in <a class="el" href="../../d5/de7/tutorial_dnn_googlenet.html">Load Caffe framework models</a> and <a class="el" href="../../d5/d86/tutorial_dnn_javascript.html">How to run deep networks in browser</a>.</p>
<h3>Example setup</h3>
<p>Before the example, is worth consider first how files are handled in emscripten applications such as OpenCV.js. Remember that OpenCV library is written in C++ and the file opencv.js is just that C++ code being translated to JavaScript or WebAssembly by emscripten C++ compiler.</p>
<p>These C++ sources use standard APIs to access the filesystem and the implementation often ends up in system calls that read a file in the hard drive. Since JavaScript applications in the browser don't have access to the local filesystem, <a href="https://emscripten.org/docs/api_reference/Filesystem-API.html">emscripten emulates a standard filesystem</a> so compiled C++ code works out of the box.</p>
<p>In the browser, this filesystem is emulated in memory while in Node.js there's also the possibility of using the local filesystem directly. This is often preferable since there's no need of copy file's content in memory. This section is explains how to do do just that, this is, configuring emscripten so files are accessed directly from our local filesystem and relative paths match files relative to the current local directory as expected.</p>
<h3>The example</h3>
<p>The following is an adaptation of <a class="el" href="../../d2/d99/tutorial_js_face_detection.html">Face Detection using Haar Cascades</a>.</p>
<div class="fragment"><div class="line">const { Canvas, createCanvas, Image, ImageData, loadImage } = require(&#39;canvas&#39;);</div><div class="line">const { JSDOM } = require(&#39;jsdom&#39;);</div><div class="line">const { writeFileSync, readFileSync } = require(&#39;fs&#39;);</div><div class="line"></div><div class="line">(async () =&gt; {</div><div class="line">  await loadOpenCV();</div><div class="line"></div><div class="line">  const image = await loadImage(&#39;lena.jpg&#39;);</div><div class="line">  const src = cv.imread(image);</div><div class="line">  let gray = new cv.Mat();</div><div class="line">  cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY, 0);</div><div class="line">  let faces = new cv.RectVector();</div><div class="line">  let eyes = new cv.RectVector();</div><div class="line">  let faceCascade = new cv.CascadeClassifier();</div><div class="line">  let eyeCascade = new cv.CascadeClassifier();</div><div class="line"></div><div class="line">  // Load pre-trained classifier files. Notice how we reference local files using relative paths just</div><div class="line">  // like we normally would do</div><div class="line">  faceCascade.load(&#39;./haarcascade_frontalface_default.xml&#39;);</div><div class="line">  eyeCascade.load(&#39;./haarcascade_eye.xml&#39;);</div><div class="line"></div><div class="line">  let mSize = new cv.Size(0, 0);</div><div class="line">  faceCascade.detectMultiScale(gray, faces, 1.1, 3, 0, mSize, mSize);</div><div class="line">  for (let i = 0; i &lt; faces.size(); ++i) {</div><div class="line">    let roiGray = gray.roi(faces.get(i));</div><div class="line">    let roiSrc = src.roi(faces.get(i));</div><div class="line">    let point1 = new cv.Point(faces.get(i).x, faces.get(i).y);</div><div class="line">    let point2 = new cv.Point(faces.get(i).x + faces.get(i).width, faces.get(i).y + faces.get(i).height);</div><div class="line">    cv.rectangle(src, point1, point2, [255, 0, 0, 255]);</div><div class="line">    eyeCascade.detectMultiScale(roiGray, eyes);</div><div class="line">    for (let j = 0; j &lt; eyes.size(); ++j) {</div><div class="line">      let point1 = new cv.Point(eyes.get(j).x, eyes.get(j).y);</div><div class="line">      let point2 = new cv.Point(eyes.get(j).x + eyes.get(j).width, eyes.get(j).y + eyes.get(j).height);</div><div class="line">      cv.rectangle(roiSrc, point1, point2, [0, 0, 255, 255]);</div><div class="line">    }</div><div class="line">    roiGray.delete();</div><div class="line">    roiSrc.delete();</div><div class="line">  }</div><div class="line"></div><div class="line">  const canvas = createCanvas(image.width, image.height);</div><div class="line">  cv.imshow(canvas, src);</div><div class="line">  writeFileSync(&#39;output3.jpg&#39;, canvas.toBuffer(&#39;image/jpeg&#39;));</div><div class="line">  src.delete(); gray.delete(); faceCascade.delete(); eyeCascade.delete(); faces.delete(); eyes.delete()</div><div class="line">})();</div><div class="line"></div><div class="line">/**</div><div class="line"> * Loads opencv.js.</div><div class="line"> *</div><div class="line"> * Installs HTML Canvas emulation to support `cv.imread()` and `cv.imshow`</div><div class="line"> *</div><div class="line"> * Mounts given local folder `localRootDir` in emscripten filesystem folder `rootDir`. By default it will mount the local current directory in emscripten `/work` directory. This means that `/work/foo.txt` will be resolved to the local file `./foo.txt`</div><div class="line"> * @param {string} rootDir The directory in emscripten filesystem in which the local filesystem will be mount.</div><div class="line"> * @param {string} localRootDir The local directory to mount in emscripten filesystem.</div><div class="line"> * @returns {Promise} resolved when the library is ready to use.</div><div class="line"> */</div><div class="line">function loadOpenCV(rootDir = &#39;/work&#39;, localRootDir = process.cwd()) {</div><div class="line">  if(global.Module &amp;&amp; global.Module.onRuntimeInitialized &amp;&amp; global.cv &amp;&amp; global.cv.imread) {</div><div class="line">    return Promise.resolve()</div><div class="line">  }</div><div class="line">  return new Promise(resolve =&gt; {</div><div class="line">    installDOM()</div><div class="line">    global.Module = {</div><div class="line">      onRuntimeInitialized() {</div><div class="line">        // We change emscripten current work directory to &#39;rootDir&#39; so relative paths are resolved</div><div class="line">        // relative to the current local folder, as expected</div><div class="line">        cv.FS.chdir(rootDir)</div><div class="line">        resolve()</div><div class="line">      },</div><div class="line">      preRun() {</div><div class="line">        // preRun() is another callback like onRuntimeInitialized() but is called just before the</div><div class="line">        // library code runs. Here we mount a local folder in emscripten filesystem and we want to</div><div class="line">        // do this before the library is executed so the filesystem is accessible from the start</div><div class="line">        const FS = global.Module.FS</div><div class="line">        // create rootDir if it doesn&#39;t exists</div><div class="line">        if(!FS.analyzePath(rootDir).exists) {</div><div class="line">          FS.mkdir(rootDir);</div><div class="line">        }</div><div class="line">        // create localRootFolder if it doesn&#39;t exists</div><div class="line">        if(!existsSync(localRootDir)) {</div><div class="line">          mkdirSync(localRootDir, { recursive: true});</div><div class="line">        }</div><div class="line">        // FS.mount() is similar to Linux/POSIX mount operation. It basically mounts an external</div><div class="line">        // filesystem with given format, in given current filesystem directory.</div><div class="line">        FS.mount(FS.filesystems.NODEFS, { root: localRootDir}, rootDir);</div><div class="line">      }</div><div class="line">    };</div><div class="line">    global.cv = require(&#39;./opencv.js&#39;)</div><div class="line">  });</div><div class="line">}</div><div class="line"></div><div class="line">function installDOM(){</div><div class="line">  const dom = new JSDOM();</div><div class="line">  global.document = dom.window.document;</div><div class="line">  global.Image = Image;</div><div class="line">  global.HTMLCanvasElement = Canvas;</div><div class="line">  global.ImageData = ImageData;</div><div class="line">  global.HTMLImageElement = Image;</div><div class="line">}</div></div><!-- fragment --><h3>Execute it</h3>
<ul>
<li>Save the file as <code>exampleNodeCanvasData.js</code>.</li>
<li>Make sure the files <code>aarcascade_frontalface_default.xml</code> and <code>haarcascade_eye.xml</code> are present in project's directory. They can be obtained from <a href="https://github.com/opencv/opencv/tree/master/data/haarcascades">OpenCV sources</a>.</li>
<li>Make sure a sample image file <code>lena.jpg</code> exists in project's directory. It should display people's faces for this example to make sense. The following image is known to work:</li>
</ul>
<div class="image">
<img src="../../lena.jpg" alt="lena.jpg"/>
<div class="caption">
image</div></div>
<p> The following command should generate the file <code>output3.jpg</code>:</p>
<div class="fragment"><div class="line">node exampleNodeCanvasData.js</div></div><!-- fragment --> </div></div><!-- contents -->
<!-- HTML footer for doxygen 1.8.6-->
<!-- start footer part -->
<hr class="footer"/><address class="footer"><small>
Generated on Fri Apr 2 2021 11:36:37 for OpenCV by &#160;<a href="http://www.doxygen.org/index.html">
<img class="footer" src="../../doxygen.png" alt="doxygen"/>
</a> 1.8.13
</small></address>
<script type="text/javascript">
//<![CDATA[
addTutorialsButtons();
//]]>
</script>
</body>
</html>
